<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page session="false" %>
<html>
<head>
    <base href="<%= basePath %>"/>
    <title>用户注册</title>
    <script type="text/javascript" src="pages/js/jquery.min.js"></script>
    <style>
        .form-group {
            margin-bottom: 16px;
        }
        .input-hint {
            display: block;
            margin-top: 4px;
            margin-left: 2px;
            font-size: 12px;
            line-height: 1.4;
            height: 16px; /* 固定高度，防止布局跳动 */
        }
        body {
            background: #f5f6fa;
            font-family: 'Segoe UI', 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .register-container {
            background: #fff;
            padding: 32px 40px;
            border-radius: 12px;
            box-shadow: 0 4px 24px rgba(0,0,0,0.08);
            min-width: 320px;
        }
        h1 {
            text-align: center;
            color: #222;
            margin-bottom: 24px;
            font-size: 2rem;
        }
        label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-size: 1rem;
        }
        input[type="text"], input[type="password"],
        input[type="email"], input[type="tel"] {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #dcdde1;
            border-radius: 6px;
            font-size: 1rem;
            background: #f9f9f9;
            transition: border 0.2s;
            box-sizing: border-box;
        }
        input[type="text"]:focus, input[type="password"]:focus,
        input[type="email"]:focus, input[type="tel"]:focus {
            border: 1.5px solid #4f8cff;
            outline: none;
        }
        input[type="submit"] {
            width: 100%;
            padding: 10px 0;
            background: #4f8cff;
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: background 0.2s;
        }
        input[type="submit"]:hover {
            background: #357ae8;
        }
        input[type="submit"]:disabled {
            background: #b3c7ff;
            cursor: not-allowed;
        }
        input[type="button"] {
            width: 100%;
            padding: 10px 0;
            background: #4f8cff;
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: background 0.2s;
        }
        input[type="button"]:hover {
            background: #357ae8;
        }
        .button-group {
            margin-top: 20px;
            display: flex;
            gap: 10px;
        }
        .success {
            color: #28a745;
        }
        .error {
            color: #dc3545;
        }
        .warning {
            color: #ffc107;
        }
    </style>

    <script>
        // 检查用户名是否合法
        function checkName() {
            const username = $("#username").val();
            const userNameSpan = $("#userNameSpan");

            if (!username.trim()) {
                userNameSpan.html("用户名不能为空").removeClass().addClass("input-hint error");
                checkSubmitEnable();
                return;
            }

            $.ajax({
                type: "post",
                url: "RegisServlet?username=" + username,
                dataType: "json",
                success: function (message) {
                    if (message.flag) {
                        userNameSpan.html("用户名可用").removeClass().addClass("input-hint success");
                    } else {
                        userNameSpan.html("用户名已被占用").removeClass().addClass("input-hint error");
                    }
                    checkSubmitEnable();
                },
                error: function (xhr) {
                    userNameSpan.html("验证失败，请重试").removeClass().addClass("input-hint error");
                    checkSubmitEnable();
                }
            })
        }

        // 检查两次输入的密码是否一致
        function checkPasswordMatch() {
            const password = $("#password").val();
            const confirmPassword = $("#confirm_password").val();
            const passwordSpan = $("#passwordSpan");

            if (!password && !confirmPassword) {
                passwordSpan.html("请设置密码").removeClass().addClass("input-hint warning");
            } else if (!password) {
                passwordSpan.html("请输入密码").removeClass().addClass("input-hint warning");
            } else if (!confirmPassword) {
                passwordSpan.html("请确认密码").removeClass().addClass("input-hint warning");
            } else if (password !== confirmPassword) {
                passwordSpan.html("两次密码不一致").removeClass().addClass("input-hint error");
            } else {
                passwordSpan.html("密码一致").removeClass().addClass("input-hint success");
            }

            checkSubmitEnable();
        }

        // 检查是否可以启用提交按钮
        function checkSubmitEnable() {
            const userNameValid = $("#userNameSpan").hasClass("success");
            const passwordsMatch = $("#passwordSpan").hasClass("success");

            $("#registerSub").attr("disabled", !(userNameValid && passwordsMatch));
        }
    </script>
</head>
<body>
<div class="register-container">
    <h1>用户注册</h1>
    <form action="RegisServlet?method=add" method="post">
        <div class="form-group">
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username" onblur="checkName()" required>
            <span id="userNameSpan" class="input-hint"></span>
        </div>

        <div class="form-group">
            <label for="nickname">用户昵称</label>
            <input type="text" name="nickname" id="nickname" >
            <span class="input-hint"></span> <!-- 占位保持布局一致 -->
        </div>

        <div class="form-group">
            <label for="phone">电话号码</label>
            <input type="tel" name="phone" id="phone" >
            <span class="input-hint"></span> <!-- 占位保持布局一致 -->
        </div>

        <div class="form-group">
            <label for="address">用户地址</label>
            <input type="text" name="address" id="address" >
            <span class="input-hint"></span> <!-- 占位保持布局一致 -->
        </div>

        <div class="form-group">
            <label for="useremail">电子邮箱</label>
            <input type="email" name="useremail" id="useremail" >
            <span class="input-hint"></span> <!-- 占位保持布局一致 -->
        </div>

        <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" id="password" name="password" onblur="checkPasswordMatch()" required>
        </div>

        <div class="form-group">
            <label for="confirm_password">确认密码：</label>
            <input type="password" id="confirm_password" name="confirm_password" onblur="checkPasswordMatch()" required>
            <span id="passwordSpan" class="input-hint"></span>
        </div>

        <div class="button-group">
            <input type="submit" value="注册" disabled="true" id="registerSub">
            <input id="back" type="button" value="返回" onclick="window.location.href='pages/userLogin.jsp'">
        </div>
    </form>
</div>
</body>
</html>
